// App.js
import React, { useState } from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/jsx/jsx';
import 'codemirror/theme/material.css';
import 'antd/dist/antd.css';
import 'antd/dist/antd.js';
import * as Babel from '@babel/standalone';

// import antd from '../../../../node_modules/antd/dist/antd.js';

// import { Button } from 'antd';
// import { Button } from 'antd';
{
  /* <Button type="primary">Click Me1</Button> */
}

const CodeEditor = () => {
  const [code, setCode] = useState(`
   const { Button } = antd;
    const App = () => (
      <div style={{ padding: 20 }}>
        <h1>Hello, Ant Design!</h1>
        <Button type="primary">Click Me1</Button>
      </div>
    );

    ReactDOM.render(<App />, document.getElementById('root'));
  `);

  const generateHtml = (code) => `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Live Preview</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.css" />
    </head>
    <body>
      <div id="root"></div>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Ant Design JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.js"></script>

     <script type="importmap">
      {
        "imports": {
          "antd": "https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.js",
        }
      }
    </script>
      <script >
        ${Babel.transform(code, { presets: ['react'] }).code}
      </script>
    </body>
    </html>
  `;

  // {
  //   "imports":{
  //     "antd": "../../../../node_modules/antd/dist/antd.js"
  //   }
  // }

  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <div style={{ flex: 1 }}>
        <CodeMirror
          value={code}
          options={{
            mode: 'jsx',
            theme: 'material',
            lineNumbers: true,
          }}
          onBeforeChange={(editor, data, value) => {
            setCode(value);
          }}
        />
      </div>
      <div style={{ flex: 1, border: '1px solid #ccc' }}>
        <iframe
          title="Preview"
          srcDoc={generateHtml(code)}
          style={{ width: '100%', height: '100%', border: 'none' }}
        />
      </div>
    </div>
  );
};

export default CodeEditor;
